<template>
  <div class="top-app-bar" :class="{ 'mac-env': isMacOS, 'non-mac-env': !isMacOS }">
    <!-- 左侧：应用图标与名称 -->
    <div  v-if="!isMacOS" class="app-brand">
      <div class="app-icon">
        <img src="/build/logo.png" alt="点点清单" width="24" height="24" />
      </div>
      <span class="app-name">点点清单</span>
    </div>

    <!-- 中间：核心功能导航 -->
    <div class="core-navigation">
      <button 
        class="nav-button" 
        :class="{ active: activeView === 'list' }"
        @click="setActiveView('list')"
      >
        列表
      </button>
      <button 
        class="nav-button" 
        :class="{ active: activeView === 'calendar' }"
        @click="setActiveView('calendar')"
      >
        日历
      </button>
    </div>

    <!-- 右侧：用户及窗口控制 -->
    <div class="user-controls">
      
      <!-- 版本升级提示按钮 -->
      <button v-if="hasNewVersion" class="upgrade-btn" @click="openUpgradePage" title="点击升级到新版本">
        <svg class="upgrade-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none">
          <path d="M12 19V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        有新版本
      </button>

      <!-- 勋章和成就系统 -->

      <button class="control-btn" @click="goToWhiteNoise" title="白噪音">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" stroke="currentColor" stroke-width="2"/>
          <path d="M12 8C10.5 8 9.5 9 9.5 10.5C9.5 12 10.5 13 12 13C13.5 13 14.5 14 14.5 15.5C14.5 17 13.5 18 12 18" stroke="currentColor" stroke-width="2"/>
          <path d="M12 7V19" stroke="currentColor" stroke-width="2"/>
          <path d="M7 12H17" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
      
      <button class="control-btn" @click="goToStatistics" title="统计报表">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2"/>
          <line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2"/>
          <line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
      
      <button class="control-btn" @click="goToSettings" title="设置">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
      
      <!-- 打开外部网站按钮 -->
      <button class="control-btn" @click="openExternalSite" title="打开Ynaa.net">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M15 3h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M10 14L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      
      <!-- 登录状态显示 -->
      <div v-if="isAuthenticated" class="user-info" @click="toggleUserMenu">
        <div class="user-avatar">
          <img v-if="currentUser?.avatar" :src="getFullAvatarUrl(currentUser.avatar)" :alt="currentUser.name" />
          <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="username">{{ currentUser?.name || '用户' }}</span>
        <svg class="dropdown-icon" :class="{ 'rotated': showUserMenu }" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        
        <!-- 用户菜单 -->
        <div v-if="showUserMenu" class="user-menu">
          <div class="user-profile">
            <div class="profile-avatar">
              <img v-if="currentUser?.avatar" :src="getFullAvatarUrl(currentUser.avatar)" :alt="currentUser.name" />
              <svg v-else width="32" height="32" viewBox="0 0 24 24" fill="none">
                <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="profile-info">
              <div class="profile-name">{{ currentUser?.name || '用户' }}</div>
              <div class="profile-id">ID: {{ currentUser?.id || 'N/A' }}</div>
            </div>
          </div>
          <div class="menu-item sync-status" @click="syncData">
            <div class="sync-info">
              <div class="sync-label">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M21.5 2V6H17.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M21.5 6L18.36 9.64C17.1 8.39 15.35 7.5 13.5 7.5C9.36 7.5 6 10.86 6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2.5 22V18H6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2.5 18L5.64 14.36C6.9 15.61 8.65 16.5 10.5 16.5C14.64 16.5 18 13.14 18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                最近同步
              </div>
              <div class="sync-time">{{ lastSyncTime }}</div>
            </div>
          </div>
          <div class="menu-item" :class="{ 'syncing': isSyncing }" @click="handleSyncNow">
            <svg v-if="!isSyncing" width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M1 4V10H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-else class="spinning" width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M21 12A9 9 0 1 1 3 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            {{ isSyncing ? '同步中...' : '立即同步' }}
          </div>
          <div class="menu-item" @click="openSettings">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            个人设置
          </div>
          <div class="menu-divider"></div>
          <div class="menu-item logout-item" @click="handleLogout">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            退出登录
          </div>
        </div>
      </div>
      
      <!-- 未登录状态 -->
      <div v-else class="login-section">
        <button class="login-btn" @click="authStore.showLoginModal">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <polyline points="10,17 15,12 10,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="15" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          登录
        </button>
      </div>
      

    </div>
    
    <!-- 退出登录确认弹窗 -->
    <div v-if="showLogoutConfirm" class="logout-confirm-overlay" @click="cancelLogout">
      <div class="logout-confirm-modal" @click.stop>
        <div class="confirm-header">
          <h3>确认退出登录</h3>
        </div>
        <div class="confirm-content">
          <p v-if="!isLoggingOut">您确定要退出登录吗？</p>
          <p v-else class="logout-progress">
            <svg class="spinning" width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M21 12A9 9 0 1 1 3 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            正在同步数据并退出登录...
          </p>
        </div>
        <div class="confirm-actions">
          <button class="cancel-btn" @click="cancelLogout" :disabled="isLoggingOut">取消</button>
          <button class="confirm-btn" @click="confirmLogout" :disabled="isLoggingOut">
            {{ isLoggingOut ? '退出中...' : '确认退出' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 个人资料设置弹窗 -->
    <div v-if="showProfileModal" class="profile-modal-overlay" @click="closeProfileModal">
      <div class="profile-modal" @click.stop>
        <div class="modal-header">
          <h3>个人资料设置</h3>
          <button class="close-btn" @click="closeProfileModal">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        
        <div class="modal-tabs">
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'profile' }"
            @click="activeTab = 'profile'"
          >
            基本资料
          </button>
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'password' }"
            @click="activeTab = 'password'"
          >
            修改密码
          </button>
        </div>

        <div class="modal-content">
          <!-- 基本资料标签页 -->
          <div v-if="activeTab === 'profile'" class="tab-content">
            <!-- 头像设置 -->
            <div class="avatar-section">
              <label class="form-label">头像</label>
              <div class="avatar-selection">
                <div class="current-avatar">
                  <img v-if="profileForm.avatar" :src="getFullAvatarUrl(profileForm.avatar)" alt="头像" />
                  <svg v-else width="60" height="60" viewBox="0 0 24 24" fill="none">
                    <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <div class="avatar-options">
                  <div class="avatar-grid">
                    <div 
                      v-for="i in 16" 
                      :key="i"
                      class="avatar-option"
                      :class="{ active: profileForm.avatar === getAvatarPath(i) }"
                      @click="selectAvatar(i)"
                    >
                      <img :src="getFullAvatarUrl(getAvatarPath(i))" :alt="`头像${i}`" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用户名 -->
            <div class="form-group">
              <label class="form-label">用户名</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="profileForm.name" 
                placeholder="请输入用户名"
              />
            </div>

            <!-- 邮箱 -->
            <div class="form-group">
              <label class="form-label">邮箱（选填）</label>
              <input 
                type="email" 
                class="form-input" 
                v-model="profileForm.email" 
                placeholder="请输入邮箱（选填）"
              />
            </div>

            <div class="form-actions">
              <button class="save-btn" @click="saveProfile" :disabled="isSaving">
                {{ isSaving ? '保存中...' : '保存' }}
              </button>
            </div>
          </div>

          <!-- 修改密码标签页 -->
          <div v-if="activeTab === 'password'" class="tab-content">
            <div class="form-group">
              <label class="form-label">当前密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="passwordForm.current_password" 
                placeholder="请输入当前密码"
              />
            </div>

            <div class="form-group">
              <label class="form-label">新密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="passwordForm.new_password" 
                placeholder="请输入新密码（至少6位，包含数字和字母）"
              />
              <div v-if="passwordForm.new_password" class="password-strength">
                <div class="strength-bar">
                  <div class="strength-fill" :class="passwordStrength.level"></div>
                </div>
                <div class="strength-text">
                  <span :class="passwordStrength.level">{{ passwordStrength.text }}</span>
                  <span class="strength-tips">{{ passwordStrength.tips }}</span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">确认新密码</label>
              <input 
                type="password" 
                class="form-input" 
                v-model="passwordForm.new_password_confirmation" 
                placeholder="请再次输入新密码"
              />
            </div>

            <div class="form-actions">
              <button class="save-btn" @click="changePassword" :disabled="isSaving">
                {{ isSaving ? '修改中...' : '修改密码' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 消息提示 -->
    <div v-if="messageState.show" class="message-toast" :class="`message-${messageState.type}`" @click="hideMessage">
      <div class="message-content">
        <svg v-if="messageState.type === 'success'" class="message-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg v-else-if="messageState.type === 'error'" class="message-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
          <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg v-else-if="messageState.type === 'warning'" class="message-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2"/>
          <line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2"/>
          <line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg v-else class="message-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <line x1="12" y1="16" x2="12" y2="12" stroke="currentColor" stroke-width="2"/>
          <line x1="12" y1="8" x2="12.01" y2="8" stroke="currentColor" stroke-width="2"/>
        </svg>
        <span class="message-text">{{ messageState.message }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import { useTodoStore } from '@/stores/todoStore'
import { useSyncStore } from '@/stores/syncStore'

// 检测是否为Mac平台
const isMacOS = ref(false)

// 版本检查相关 - 使用App.vue提供的版本管理器
const versionManager = inject('versionManager')
const hasNewVersion = ref(false)
const versionInfo = ref({
  currentVersion: '1.0.0',
  latestVersion: '1.0.0',
  upgradeUrl: 'https://www.ynaa.net/topics/8'
})

// 平台检测函数
function detectPlatform() {
  // 检测是否在Electron环境中
  if (window.electronAPI && window.electronAPI.getPlatform) {
    // 通过Electron API获取平台信息
    window.electronAPI.getPlatform().then(platform => {
      isMacOS.value = platform === 'darwin'
    }).catch(() => {
      // 如果API调用失败，使用浏览器检测
      isMacOS.value = navigator.platform.toLowerCase().includes('mac')
    })
  } else {
    // 在浏览器环境中检测
    isMacOS.value = navigator.platform.toLowerCase().includes('mac') || 
                    navigator.userAgent.toLowerCase().includes('mac')
  }
}

const showUserMenu = ref(false)
const showLogoutConfirm = ref(false)
const isLoggingOut = ref(false)

// 消息提示状态
const messageState = ref({
  show: false,
  message: '',
  type: 'info' // success, error, warning, info
})

// 显示消息
const showMessage = (message, type = 'info') => {
  messageState.value = {
    show: true,
    message,
    type
  }
  // 3秒后自动隐藏
  setTimeout(() => {
    hideMessage()
  }, 3000)
}

// 隐藏消息
const hideMessage = () => {
  messageState.value.show = false
}

// 使用router
const router = useRouter()
// 使用认证store
const authStore = useAuthStore()
// 使用todo store
const { state: todoState } = useTodoStore()
// 使用同步store
const syncStore = useSyncStore()
// 使用computed确保响应式更新
const isAuthenticated = computed(() => authStore.isAuthenticated)
const currentUser = computed(() => authStore.user)
// 同步相关计算属性
const lastSyncTime = computed(() => syncStore.formatSyncTime(syncStore.syncState.lastSyncTime))
const isSyncing = computed(() => syncStore.syncState.isSyncing)
// activeView与todoStore的currentView保持同步
const activeView = computed(() => {
  // 使用displayMode来确定当前显示模式
  return todoState.displayMode || 'list'
})

// 密码强度计算
const passwordStrength = computed(() => {
  const password = passwordForm.value.new_password
  if (!password) return { level: '', text: '', tips: '' }
  
  let score = 0
  let tips = []
  
  // 长度检查
  if (password.length >= 6) score += 1
  else tips.push('至少6位')
  
  // 包含数字
  if (/\d/.test(password)) score += 1
  else tips.push('包含数字')
  
  // 包含字母
  if (/[a-zA-Z]/.test(password)) score += 1
  else tips.push('包含字母')
  
  // 包含大小写字母
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 1
  
  // 包含特殊字符
  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 1
  
  // 长度加分
  if (password.length >= 8) score += 1
  if (password.length >= 12) score += 1
  
  let level, text
  if (score < 3) {
    level = 'weak'
    text = '弱'
  } else if (score < 5) {
    level = 'medium'
    text = '中'
  } else {
    level = 'strong'
    text = '强'
  }
  
  const tipsText = tips.length > 0 ? `缺少：${tips.join('、')}` : '密码强度良好'
  
  return { level, text, tips: tipsText }
})
const { logout } = authStore

const setActiveView = (view) => {
  // 更新displayMode而不是currentView
  todoState.displayMode = view
}

// 切换用户菜单
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

// 点击外部关闭菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-info')) {
    showUserMenu.value = false
  }
}

// 查看同步状态
const syncData = () => {
  // 显示同步状态信息，可以在这里添加更多逻辑
  console.log('最近同步时间:', syncStore.syncState.lastSyncTime)
  showUserMenu.value = false
}

// 立即同步
const handleSyncNow = async () => {
  if (syncStore.syncState.isSyncing) return
  
  try {
    await syncStore.syncNow()
    console.log('同步成功')
  } catch (error) {
    console.error('同步失败:', error)
    // 这里可以添加错误提示
  } finally {
    showUserMenu.value = false
  }
}

// 跳转到设置页面
const goToSettings = () => {
  router.push('/settings')
}

// 跳转到统计报表页面
const goToStatistics = () => {
  router.push('/statistics')
}

// 跳转到白噪音页面
const goToWhiteNoise = () => {
  router.push('/whitenoise')
}

// 打开外部网站
const openExternalSite = () => {
  const url = 'https://www.ynaa.net?form=diandian_list'
  
  try {
    if (window.electronAPI && typeof window.electronAPI.openExternal === 'function') {
      // Electron环境
      window.electronAPI.openExternal(url).catch(error => {
        console.error('Failed to open external URL in Electron:', error)
        // 如果Electron方法失败，回退到浏览器方法
        window.open(url, '_blank')
      })
    } else {
      // 浏览器环境或Electron API不可用
      window.open(url, '_blank')
    }
  } catch (error) {
    console.error('Error opening external site:', error)
    // 最后的回退方案
    try {
      window.open(url, '_blank')
    } catch (fallbackError) {
      console.error('All methods failed to open external URL:', fallbackError)
    }
  }
}

// 检查版本更新 - 使用App.vue提供的版本管理器
const checkForUpdates = async () => {
  if (!versionManager) {
    console.warn('版本管理器未找到')
    return
  }
  
  try {
    const result = await versionManager.checkForUpdates()
    versionInfo.value = result
    hasNewVersion.value = result.hasUpdate
    
    if (result.hasUpdate) {
      console.log(`发现新版本: ${result.latestVersion} (当前版本: ${result.currentVersion})`)
    }
  } catch (error) {
    console.warn('检查版本更新失败:', error)
  }
}

// 打开升级页面 - 使用App.vue提供的版本管理器
const openUpgradePage = () => {
  if (versionManager) {
    versionManager.openUpgradePage()
  } else {
    // 降级处理
    const upgradeUrl = 'https://www.ynaa.net/topics/8'
    window.open(upgradeUrl, '_blank')
  }
}

// 个人设置相关状态
const showProfileModal = ref(false)
const profileForm = ref({
  name: '',
  email: '',
  avatar: null
})
const passwordForm = ref({
  current_password: '',
  new_password: '',
  new_password_confirmation: ''
})

const isSaving = ref(false)
const activeTab = ref('profile') // profile, password






// 打开设置
const openSettings = () => {
  showProfileModal.value = true
  showUserMenu.value = false
  loadUserProfile()
}

// 加载用户资料
const loadUserProfile = async () => {
  try {
    const { userApi } = await import('@/api/user')
    const response = await userApi.getProfile()
    if (response.data.success) {
      const userData = response.data.data
      profileForm.value = {
        name: userData.name || '',
        email: userData.email || '',
        avatar: userData.avatar
      }
    }
  } catch (error) {
    console.error('加载用户资料失败:', error)
    showMessage('加载用户资料失败，请重试', 'error')
  }
}

// 获取头像路径
const getAvatarPath = (index) => {
  return `SystemAvatar/${String(index).padStart(2, '0')}.jpg`
}

// 获取完整头像URL
const getFullAvatarUrl = (avatarPath) => {
  if (!avatarPath) return ''
  if (avatarPath.startsWith('http')) return avatarPath
  return `${import.meta.env.VITE_AVATAR_BASE_URL}${avatarPath}`
}

// 选择头像
const selectAvatar = async (index) => {
  const avatarPath = getAvatarPath(index)
  profileForm.value.avatar = avatarPath
  
  // 立即保存头像选择
  try {
    const { userApi } = await import('@/api/user')
    const response = await userApi.updateProfile({
      name: profileForm.value.name,
      email: profileForm.value.email,
      avatar: avatarPath
    })
    if (response.data.success) {
      // 更新store中的用户信息
      await authStore.verifyToken()
      showMessage('头像更新成功', 'success')
    } else {
      showMessage(response.data.message || '头像更新失败', 'error')
    }
  } catch (error) {
    console.error('头像更新失败:', error)
    const errorMessage = error.response?.data?.message || '头像更新失败，请重试'
    showMessage(errorMessage, 'error')
  }
}

// 保存用户资料
const saveProfile = async () => {
  if (!profileForm.value.name.trim()) {
    showMessage('请输入用户名', 'warning')
    return
  }

  if (profileForm.value.name.length > 20) {
    showMessage('用户名长度不能超过20位', 'warning')
    return
  }

  // 邮箱不是必填项，但如果填写了需要验证格式
  if (profileForm.value.email.trim()) {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    if (!emailRegex.test(profileForm.value.email)) {
      showMessage('请输入有效的邮箱地址', 'warning')
      return
    }
  }

  isSaving.value = true
  try {
    const { userApi } = await import('@/api/user')
    const response = await userApi.updateProfile({
      name: profileForm.value.name,
      email: profileForm.value.email
    })
    if (response.data.success) {
      // 更新store中的用户信息
      await authStore.verifyToken()
      showMessage('资料更新成功', 'success')
      // 更新本地profileForm数据
      if (response.data.data) {
        profileForm.value.name = response.data.data.name
        profileForm.value.email = response.data.data.email
        if (response.data.data.avatar) {
          profileForm.value.avatar = response.data.data.avatar
        }
      }
    } else {
      showMessage(response.data.message || '资料更新失败', 'error')
    }
  } catch (error) {
    console.error('资料更新失败:', error)
    if (error.response?.data?.errors) {
      const errors = Object.values(error.response.data.errors).flat()
      showMessage(errors.join('\n'), 'error')
    } else {
      const errorMessage = error.response?.data?.message || '资料更新失败，请重试'
      showMessage(errorMessage, 'error')
    }
  } finally {
    isSaving.value = false
  }
}

// 修改密码
const changePassword = async () => {
  if (!passwordForm.value.current_password) {
    showMessage('请输入当前密码', 'warning')
    return
  }

  if (!passwordForm.value.new_password) {
    showMessage('请输入新密码', 'warning')
    return
  }

  if (passwordForm.value.new_password.length < 6) {
    showMessage('新密码长度至少6位', 'warning')
    return
  }

  // 验证密码强度：必须包含数字和字母
  const hasNumber = /\d/.test(passwordForm.value.new_password)
  const hasLetter = /[a-zA-Z]/.test(passwordForm.value.new_password)
  
  if (!hasNumber || !hasLetter) {
    showMessage('密码必须包含数字和字母', 'warning')
    return
  }

  if (passwordForm.value.new_password !== passwordForm.value.new_password_confirmation) {
    showMessage('两次输入的新密码不一致', 'warning')
    return
  }

  isSaving.value = true
  try {
    const { userApi } = await import('@/api/user')
    const response = await userApi.changePassword(passwordForm.value)
    if (response.data.success) {
      showMessage('密码修改成功', 'success')
      // 清空表单
      passwordForm.value = {
        current_password: '',
        new_password: '',
        new_password_confirmation: ''
      }
    } else {
      showMessage(response.data.message || '密码修改失败', 'error')
    }
  } catch (error) {
    console.error('密码修改失败:', error)
    const errorMessage = error.response?.data?.message || '密码修改失败，请重试'
    showMessage(errorMessage, 'error')
  } finally {
    isSaving.value = false
  }
}

// 关闭设置弹窗
const closeProfileModal = () => {
  showProfileModal.value = false
  activeTab.value = 'profile'
  // 重置表单
  passwordForm.value = {
    current_password: '',
    new_password: '',
    new_password_confirmation: ''
  }
}

// 退出登录
const handleLogout = () => {
  showLogoutConfirm.value = true
  showUserMenu.value = false
}

// 确认退出登录
const confirmLogout = async () => {
  if (isLoggingOut.value) return
  
  isLoggingOut.value = true
  
  try {
    // 先同步数据
    // showMessage('正在同步数据...', 'info')
    await syncStore.syncNow()
    // showMessage('数据同步成功，正在退出登录...', 'success')
    
    // 同步成功后退出登录
    logout()
    showLogoutConfirm.value = false
  } catch (error) {
    console.error('同步失败:', error)
    // 即使同步失败也允许退出登录，但给用户提示
    showMessage('数据同步失败，但仍将退出登录', 'warning')
    
    // 延迟一下再退出，让用户看到提示
    setTimeout(() => {
      logout()
      showLogoutConfirm.value = false
    }, 2000)
  } finally {
    isLoggingOut.value = false
  }
}

// 取消退出登录
const cancelLogout = () => {
  if (isLoggingOut.value) return
  showLogoutConfirm.value = false
}



// 生命周期
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  detectPlatform()
  // 检查版本更新
  checkForUpdates()
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style lang="less" scoped>
.top-app-bar {
  height: 48px;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  -webkit-app-region: drag;
  user-select: none;
}

/* Mac环境下的样式调整 - 为系统按钮预留左侧空间，使内容与系统按钮水平居中 */
.top-app-bar.mac-env {
  padding-left: 78px; /* 为Mac系统按钮预留空间，精确对齐 */
  justify-content: center; /* 使核心导航居中 */
}

.top-app-bar.mac-env .core-navigation {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 精确居中对齐 */
}

.top-app-bar.mac-env .user-controls {
  margin-left: auto; /* 右侧控件保持在右边 */
}

/* 非Mac环境保持原有样式 */
.top-app-bar.non-mac-env {
  padding-left: 16px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .app-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
  }
  
  .app-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }
}

.core-navigation {
  display: flex;
  gap: 4px;
  
  .nav-button {
    padding: 6px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-app-region: no-drag;
    
    &:hover {
      background-color: var(--surface-color);
      color: var(--text-primary);
    }
    
    &.active {
      background-color: var(--primary-color);
      color: #ffffff;
    }
  }
}

.user-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-app-region: no-drag;
    
    &:hover {
      background-color: var(--surface-color);
      color: var(--text-primary);
    }
    
    svg {
      width: 16px;
      height: 16px;
    }
  }
  
  .upgrade-btn {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    background: #10b981;
    color: white;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: pulse 2s infinite;
    -webkit-app-region: no-drag;
    white-space: nowrap;
    
    .upgrade-arrow {
      animation: bounce-up 1.5s ease-in-out infinite;
    }
    
    &:hover {
      background: #059669;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
      
      .upgrade-arrow {
        animation: bounce-up 0.8s ease-in-out infinite;
      }
    }
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-app-region: no-drag;
    position: relative;
    
    &:hover {
      background-color: var(--surface-color);
    }
    
    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--surface-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .username {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }
    
    .dropdown-icon {
      color: var(--text-secondary);
      transition: transform 0.2s ease;
      
      &.rotated {
        transform: rotate(180deg);
      }
    }
    
    .user-avatar {
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    
    .user-menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--background-color);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 200px;
      z-index: 1000;
      
      .user-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        
        .profile-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: var(--surface-color);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-secondary);
          
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        
        .profile-info {
          flex: 1;
          
          .profile-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
          }
          
          .profile-id {
            font-size: 12px;
            color: var(--text-secondary);
          }
        }
      }
      
      .menu-divider {
        height: 1px;
        background: var(--border-color);
        margin: 4px 0;
      }
      
      .menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:hover {
          background: var(--surface-color);
        }
        
        &.logout-item {
          color: #ef4444;
          
          svg {
            color: #ef4444;
          }
          
          &:hover {
            background: rgba(239, 68, 68, 0.1);
          }
        }
        
        svg {
          color: var(--text-secondary);
        }
        
        &.sync-status {
          .sync-info {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            gap: 2px;
            
            .sync-label {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 14px;
            }
            
            .sync-time {
              font-size: 12px;
              color: var(--text-secondary);
              margin-left: 24px;
            }
          }
        }
        
        &.syncing {
          opacity: 0.7;
          pointer-events: none;
          
          .spinning {
            animation: spin 1s linear infinite;
          }
        }
        
        svg {
          color: var(--text-secondary);
        }
      }
    }
  }
  
  .login-section {
    -webkit-app-region: no-drag;
    
    .login-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        background: var(--primary-hover);
      }
      
      svg {
        width: 16px;
        height: 16px;
      }
    }
  }
}

/* 退出登录确认弹窗样式 */
.logout-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.logout-confirm-modal {
  background: var(--surface-color);
  border-radius: 12px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: confirmModalSlideIn 0.3s ease-out;
}

@keyframes confirmModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.confirm-header {
  padding: 24px 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  
  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }
}

.confirm-content {
  padding: 20px 24px;
  text-align: center;
  
  p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
  }
  
  .logout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary-color) !important;
    font-weight: 500;
    
    .spinning {
      animation: spin 1s linear infinite;
    }
  }
}

.confirm-actions {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  
  button {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .cancel-btn {
    background: var(--surface-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    
    &:hover:not(:disabled) {
      background: var(--background-color);
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  
  .confirm-btn {
    background: #ef4444;
    color: white;
    
    &:hover:not(:disabled) {
      background: #dc2626;
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: #ef4444;
    }
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/* 消息提示样式 */
.message-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 2001;
  min-width: 300px;
  max-width: 500px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: slideInRight 0.3s ease;
}

.message-toast:hover {
  transform: translateX(-4px);
}

.message-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-icon {
  flex-shrink: 0;
}

.message-text {
  font-size: 14px;
  line-height: 1.4;
}

.message-success {
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  color: #0c4a6e;
}

.message-success .message-icon {
  color: #0ea5e9;
}

.message-error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #991b1b;
}

.message-error .message-icon {
  color: #ef4444;
}

.message-warning {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.message-warning .message-icon {
  color: #f59e0b;
}

.message-info {
  background: #f0f9ff;
  border: 1px solid #3b82f6;
  color: #1e40af;
}

.message-info .message-icon {
  color: #3b82f6;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 个人资料设置弹窗样式 */
.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  -webkit-app-region: no-drag;
}

.profile-modal {
  background: var(--background-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  
  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background: var(--surface-color);
      color: var(--text-primary);
    }
  }
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  
  .tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    
    &:hover {
      color: var(--text-primary);
      background: var(--surface-color);
    }
    
    &.active {
      color: var(--primary-color);
      border-bottom-color: var(--primary-color);
    }
  }
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avatar-section {
  .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
  }
  
  .avatar-selection {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .current-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--surface-color);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px solid var(--border-color);
      align-self: center;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      svg {
        color: var(--text-secondary);
      }
    }
    
    .avatar-options {
      .avatar-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 8px;
        
        .avatar-option {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;
          border: 2px solid transparent;
          transition: all 0.2s ease;
          
          &:hover {
            border-color: var(--primary-color);
            transform: scale(1.1);
          }
          
          &.active {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
          }
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}

.password-strength {
  margin-top: 8px;
  
  .strength-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
    
    .strength-fill {
      height: 100%;
      transition: all 0.3s ease;
      
      &.weak {
        width: 33%;
        background: #ef4444;
      }
      
      &.medium {
        width: 66%;
        background: #f59e0b;
      }
      
      &.strong {
        width: 100%;
        background: #10b981;
      }
    }
  }
  
  .strength-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    
    .weak {
      color: #ef4444;
      font-weight: 500;
    }
    
    .medium {
      color: #f59e0b;
      font-weight: 500;
    }
    
    .strong {
      color: #10b981;
      font-weight: 500;
    }
    
    .strength-tips {
      color: var(--text-secondary);
      font-size: 11px;
    }
  }
}

.form-group {
  .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
  }
  
  .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-color);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    
    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    &::placeholder {
      color: var(--text-secondary);
    }
  }
}

.form-actions {
  margin-top: 8px;
  
  .save-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover:not(:disabled) {
      background: var(--primary-hover-color, #3b82f6);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 箭头向上弹跳动画 */
@keyframes bounce-up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
</style>